<html>
    <head>
        <title>Fullscreen Table</title>
        <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

        <!-- web.willflow js -->
        <link rel="stylesheet" href="../../src/wf-iphone/iphone.css" />
        <script type="text/javascript" src="../../src/mootools/mootools-core.js"></script>
        <script type="text/javascript" src="../../src/wf-iphone/iphone.js"></script>
    </head>
	
	<!-- main content here -->
    <body>
    	<!-- header form -->
		<div wf_style="header">
			<form action="table_fullscreen.html">
				<table wf_style="fullscreen">
					<tbody><tr><td bgcolor="#000000">
				    <input type="text" name="query" wf_style="search"/>
					<select wf_style="popup" name="cat">
		                <option value="1001">Chinese</option>
		                <option value="2001">Western</option>
		            </select>
		            <select wf_style="popup" name="loc">
		                <option value="1001">Shatin</option>
		                <option value="2001">Kowloon</option>
		            </select>
				</td></tr></tbody></table>
			</form>
		</div>
		
    	<!-- fullscreen table definition -->
        <table wf_style="fullscreen">
        <tbody>
            <tr>
                <td><img src="restaurant_1.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_1.html">
                        <div><b>Cafe Union</b></div>
						<div>Western Food</div>
                        <div wf_style="small">Western Food</div>
                    </a>
                </td>
            </tr>
            <tr>
                <td><img src="restaurant_2.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_2.html">
                        <div><b>Kiyotaki</b><br/></div>
                        <div>Japanese Food</div>
                    </a>
                </td>
            </tr>
            <tr>
                <td><img src="restaurant_3.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_1.html">
                        <div><b>Pizza Milano</b><br/></div>
                        <div>Italian Food</div>
                    </a>
                </td>
            </tr>
            <tr>
                <td><img src="restaurant_4.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_2.html">
                        <div><b>Little Italy</b></div>
                        <div>Italian Food</div>
                    </a>
                </td>
            </tr>
        </tbody>
        </table>
		
		<!-- Footer definition -->
		<div wf_style="footer">
			<table wf_style="fullscreen">
				<tbody><tr><td bgcolor="#FFFFDD">
				ABC Restaurant Coupon...	
				</td></tr></tbody>
			</table>
		</div>
    </body>
    <script>
        window.addEvent("load", function() {
            WF.initIPhone();
        });
    </script>
    <link type="text/css" rel="stylesheet" href="../../src/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
    <script language="javascript" src="../../src/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
    <script language="javascript" src="../../src/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
</html>
